<!--  -->
<template>
    <div>
      <div v-if="showDetail">
        <p class="return">
          <span class="returnicon">
            <span @click="showDetailChange(false)"  class="V7_iconfont V7_iconV7tubiao_mianfanhui icon"></span> <span>技能组: {{detailName}}</span>
          </span>
          <el-button size="mini"  @click="toSerach(false)">刷新</el-button>
        </p>
        <div class="line"></div>
        <Table :tableHeaders="tableHeadersDetail" :tableOperate="['loot']" :type="'queue'" :tableData="tableDataDetail"  ref="myTable"></Table>
      </div>

      <div class="flex-main" v-else>
        <div class="flex-search">
          <div class="flex-title">
            <div class="queue-show">
              <div class="myicon">
                <i class="V7_iconfont V7_iconV7tubiao_zongpaiduishu"></i>
              </div>
              <div>
                <p class="h1">总排队数</p>
                <p class="h2">{{totalQueue}}</p>
              </div>
            </div>
            <quickSearch :advForm="quickSearchForm"> </quickSearch>
          </div>
          <div>
            <el-button  size="mini" @click="toSerach(false)">刷新</el-button>
          </div>
        </div>

        <div class="straightLine"></div>
        <Table :tableHeaders="tableHeaders" :tableData="tableData"  ref="myTable"></Table>
        <el-pagination
        class="pages"
        :current-page.sync="pagingData.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size.sync="pagingData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagingData.total"
      >
      </el-pagination>
      </div>

    </div>
</template>

<script lang='ts'>
import { Component, Mixins, Prop } from 'vue-property-decorator'
import mixins from './mixins'
@Component({ name: 'Queue' })
export default class extends Mixins(mixins) {
  @Prop({ default: () => [] }) public allData !: any
  private showDetail = false
  private quickSearchForm: any = {
    form: {
      queue: []
    },
    advSearchOptions: []
  }

  get tableData () {
    return this.handleCurrentChange()
  }

  private mounted () {
    this.quickSearchForm.advSearchOptions.push({ label: '技能组', inputType: 'select', selectData: this.queueList, name: 'queue', clearable: true, filterable: true, multiple: true, defaultProp: { label: 'name', value: '_id' } })
  }

  private handleCurrentChange (val?: any, flag?: boolean) {
    const { queue } = this.quickSearchForm.form
    const data = this.allData.filter(item => {
      const queueFlag = queue.length ? queue.includes(item.queueNumber) : true
      return queueFlag
    })

    this.pagingData.total = data.length
    const list: any = []
    if (flag) {
      this.pagingData.page = 1
    }
    const { limit, page } = this.pagingData
    for (let i = (page - 1) * limit; i < page * limit; i++) {
      const element = data[i]
      if (element) {
        list.push(element)
      }
    }
    return list
    // formatter: row => `${row.statusName} (${this.toHMS(row.statusDuration)})`
  }

  private detailName = ''

  private viewTheQueue (list, name, id) {
    this.detailName = name
    this.detailId = id
    // this.tableDataDetail = this.allData.find(i => i.queueNumber === this.detailId).currentQueue || []
    this.showDetailChange(true)
  }

  // private tableDataDetail = []
  get tableDataDetail () {
    let list = []
    if (this.detailId) {
      list = this.allData.find(i => i.queueNumber === this.detailId).currentQueue || []
    }
    return list
  }

  private detailId = ''

  private showDetailChange (val) {
    this.showDetail = val
  }

  private tableHeaders = [
    { label: '技能组', prop: 'queueName' },
    { label: '登录座席', prop: 'online', formatter: row => row.online?.length },
    { label: '空闲座席', prop: 'idle', formatter: row => row.idle?.length },
    { label: '通话中座席', prop: 'calling', formatter: row => row.calling?.length },
    { label: '当前排队数', prop: 'currentWait' },
    { label: '最大排队数', prop: 'maxLimit' },
    { label: '排队放弃数', prop: 'abandoned' },
    { label: '今日接通数', prop: 'answered' },
    { label: '服务水平', prop: 'answeredInTime', formatter: row => this.toPercentage(row.answeredInTimeRate) },
    {
      label: '操作',
      prop: 'queueAbandoned',
      formatter: row => {
      // row.currentQueue
        const h = this.$createElement
        const prop: any = {
          attrs: { type: 'primary', underline: false },
          on: {
            click: () => {
              this.viewTheQueue(row.currentQueue, row.queueName, row.queueNumber)
            }
          }
        }
        return h('el-link', prop, '查看队列')
      }
    }
  ]

  private tableHeadersDetail = [
    { label: '客户号码', prop: 'customerNumber' },
    { label: '服务号', prop: 'trunkNumber' },
    { label: '开始时间', prop: 'queueStartTime' },
    { label: '等待时长', prop: 'waitDuration', formatter: row => this.toHMS(row.waitDuration) }
  ]

  private pagingData = {
    limit: 10,
    total: 0,
    page: 1
  }

  get totalQueue () {
    return this.allData.reduce((val, item) => {
      return val + item.currentWait
    }, 0)
  }
}
</script>
<style lang='stylus' scoped>
.flex-search
  display flex
  justify-content space-between
  align-items center
.pages
  text-align right
  margin 10px 0
.myicon
  width: 37px;
  height: 37px;
  background: linear-gradient(90deg, #49ACF3, #1897F1);
  box-shadow: 0px 4px 20px 0px #AED2FA;
  border-radius: 4px;
  display flex
  justify-content center
  align-items center
  margin-right 11px
  i
    font-size 16px
    color #fff
.flex-title
  display flex
  align-items center
.queue-show
  width 130px
  height: 53px;
  background: #FFFFFF;
  border: 1px solid #ECF0F3;
  border-radius: 4px;
  display flex
  box-sizing border-box
  padding-top 8px
  padding-left 8px
  margin-right 24px
.h1
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #767E91;
.h2
  font-size: 12px;
.return
  display: flex;
  align-items: center;
  justify-content: space-between;
.returnicon
  display: flex;

  align-items: center;
.icon
  font-size: 14px
  color #C4CDD4
  margin-right: 8px
  cursor pointer
.line
  width: 100%
  height: 1px
  background: #ECF0F3;
  margin: 16px 0
</style>
